/*
 * @Author: kanglang
 * @Date: 2020-07-17 16:24:18
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-06-15 14:51:45
 * @Description: item条目
 */
import React, { PureComponent } from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  Image,
  PixelRatio,
} from 'react-native';
import { iconUserCoffee, iconRightGray02, iconEditBlack } from '@/images';
import {
  px2dp,
  splitLineColorLightGray,
  fontColorBlack,
  fontColorSecDeepGray,
} from '@/styles';
import { Button } from '@/common';
import { mainBgColorWhite } from '../../../../common/styles';

const { Submit } = Button;
export default class SwtichPhone extends PureComponent {
  static defaultProps = {

  };

  render() {
    const { onClick, userInfo } = this.props;
    return (
      <TouchableOpacity
        activeOpacity={1}
        onPress={() => onClick()}
        style={[styles.container]}
      >
        <View style={[styles.leftWrap]}>
          <Text>手机号码</Text>
        </View>
        <View style={[styles.rightWrap]}>
          <Text style={[styles.extra]}>{userInfo.mobile}</Text>
          <Submit
            text='换绑'
            icon={iconEditBlack}
            iconStyle={{ marginRight: px2dp(8) }}
            boxStyle={{
              width: px2dp(138),
              height: px2dp(62),
              borderRadius: px2dp(8),
              backgroundColor: mainBgColorWhite,
              borderColor: splitLineColorLightGray,
              borderWidth: 1 / PixelRatio.get()
            }}
            btnStyle={{}}
            btnTextStyle={{
              fontSize: px2dp(24),
              color: fontColorBlack
            }}
            onClick={() => onClick()}
          />
        </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: px2dp(110),
    backgroundColor: '#fff',
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: px2dp(32),
    marginTop: px2dp(24),
  },
  rightWrap: {
    flex: 1,
    marginLeft: px2dp(48),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  extra: {
    color: fontColorSecDeepGray
  }
});
